<template>
    <el-drawer :title="titleMap[mode]" v-model="visible" :size="800" destroy-on-close @closed="$emit('closed')">
		<el-container>
			<el-main>
				<el-form :model="form" :rules="rules" :disabled="mode==='show'" ref="dialogForm" label-width="100px" label-position="right">
					<el-form-item label="标题" prop="title">
						<el-input v-model="form.title" placeholder="请输入标题" clearable></el-input>
					</el-form-item>
					<el-form-item label="公告类型" prop="noticeType">
						<sc-select v-model="form.noticeType" dict="notice_type" placeholder="请选择公告类型" style="width: 100%;" clearable></sc-select>
					</el-form-item>
					<el-form-item label="状态" prop="status">
						<el-radio-group v-model="form.status">
							<el-radio-button label="0">草稿</el-radio-button>
							<el-radio-button label="1">发布</el-radio-button>
						</el-radio-group>
					</el-form-item>
					<el-form-item label="公告内容" prop="content">
						<sc-editor v-model="form.content" :disabled="mode==='show'" placeholder="请输入公告内容" :height="400"></sc-editor>
					</el-form-item>
					<el-form-item label="备注" prop="remark">
						<el-input v-model="form.remark" type="textarea" placeholder="请输入备注" clearable></el-input>
					</el-form-item>
				</el-form>
			</el-main>
		</el-container>
        <template #footer>
            <el-button @click="visible=false">取 消</el-button>
            <el-button v-if="mode!=='show'" type="primary" :loading="isSaving" @click="submit()">保 存</el-button>
        </template>
    </el-drawer>
</template>

<script>
	import { defineAsyncComponent } from 'vue';
	const scEditor = defineAsyncComponent(() => import('@/components/scEditor'));

    export default {
        emits: ['success', 'closed'],
		components: {
			scEditor
		},
        data() {
            return {
                // 表单元素控制
                mode: "add",
                titleMap: {
                    add: '新增',
                    edit: '编辑',
                    show: '查看'
                },
                visible: false,
                isSaving: false,
                // 表单数据
                form: {
                    id: null,
                    title: null,
                    noticeType: '10',
                    content: null,
                    remark: null,
                    status: '1',
                },
                // 表单验证规则
                rules: {
                    title: [
                      {required: true, message: '请输入标题', trigger: 'blur'}
                    ],
                    noticeType: [
                      {required: true, message: '请输入公告类型', trigger: 'blur'}
                    ],
                    content: [
                      {required: true, message: '请输入公告内容', trigger: 'blur'}
                    ],
                    status: [
                      {required: true, message: '请输入状态', trigger: 'blur'}
                    ],
                }
            }
        },
        mounted() {
        },
        methods: {
            // 显示
            open(mode = 'add') {
                this.mode = mode;
                this.visible = true;
                return this;
            },
            // 表单注入数据
            setData(data) {
                this.form.id = data.id;
                this.form.title = data.title;
                this.form.noticeType = data.noticeType;
                this.form.content = data.content;
                this.form.remark = data.remark;
                this.form.status = data.status;
                this.form.createTime = data.createTime;
            },
            // 表单提交
            submit() {
                this.$refs.dialogForm.validate((valid) => {
                    if (valid) {
                        this.isSaving = true;
                        if (this.form.id) {
                            this.$API.system.notice.edit.put(this.form).then(() => {
                                this.$emit('success');
                                this.visible = false;
                                this.$message.success("保存成功");
                            }).catch(() => {
                                this.isSaving = false;
                            });
                        } else {
                            this.$API.system.notice.add.post(this.form).then(() => {
                                this.$emit('success');
                                this.visible = false;
                                this.$message.success("保存成功");
                            }).catch(() => {
                                this.isSaving = false;
                            });
                        }
                    }
                })
            }
        }
    }
</script>

<style>
</style>
